<template>
    <div>
      <div
        class="top-title text-[18px] text-[] bg-[] w-[100%] flex items-center px-[18px] items-center py-[18px] relative pl-[30PX] relative">
        <div class="py-[18px] h-[100%] absolute top-[0px] left-[18px]">
          <div class="w-[4PX] h-[100%] bg-[#FD4442] mr-[5px] ">

          </div>
        </div>
        {{getLanguage(props.product.language).hotSellingRecommendation}}
      </div>

      <div class="flex flex-wrap mt-[15PX] px-[18px]">
        <div class="flex recommended w-[100%] overflow-y-scroll px-[18px]">
          <div class="recommended-item" v-for="(item,index) in recommendList" :key="index"
               @click="toDetail(item.id)">
            <div class="w-276PX h-276PX bg-[#F5F5F5] rounded-[8PX] mr-[18PX] transition">
              <img class="w-[100%] h-[100%] rounded-[8PX]" :src="item.cover" alt=""/>
            </div>
            <div class="mt-[12PX] ml-2">
              <p class="recommended-title text-[16PX]">{{ item.titleExternal }}</p>
              <div class="flex items-center">
                <p class="text-[#FF0C06] text-[18PX] font-bold">{{
                    areaInfo.currencySymbol
                  }}{{ item.discountedPrice }}</p>
                <p class="text-[#c7c7c7] text-[12PX] ml-[10PX]">{{
                    areaInfo.currencySymbol
                  }}{{ item.originalPrice }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script setup lang="ts">
import {useAppStore} from "@/store/modules/app";
import { getLanguage } from "@/utils/langue";
const props = defineProps({
  recommendList: {
    type: Array,
    required: false,
    default: () =>[]
  },
})

const toDetail=(id)=>{
  let tenantId = useAppStore().tenantId;
    //  获取当前域名
    let loc = location.host.split(':')[0]

    window.open(
      'http://'+ loc +'/#/product?id=' + id + '&tenantId=' + tenantId,
      '_blank'
    )
}
</script>
<style lang="scss" scoped>
.recommended{

  .recommended-item{

    .recommended-title{
      width: 120PX;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
